<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{ count }}</h3>
    <input
      type="text"
      placeholder="请输入名字"
      v-model="name"
      @keypress.enter="add"
    />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  methods: {
    add() {
      this.$store.commit("personMudle/add", this.name);
      this.name = "";
    },
    addWang() {
      this.$store.commit("personMudle/addWang", this.name);
      this.name = "";
    },
    addPersonServer() {
      this.$store.dispatch("personMudle/addPersonServer");
    },
  },
  computed: {
    // ...mapState({
    //   count: (state) => {
    //     return state.count;
    //   },
    //   personList: (state) => {
    //     return state.personList;
    //   },
    // }),
    ...mapState("personMudle", ["personList"]),
    ...mapState("countMudle", ["count"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  height: 20px;
  width: 150px;
  margin: 5px;
}
.main {
  padding: 10px;
  margin: 10px;
}
select {
  margin: 10px;
}
li {
  list-style-type: none;
}
</style>
